<template>
	<view>
		<uni-search-bar class="openSearch" placeholder="搜索" bgColor="#FFFFFF" @confirm="search" @input="input"
			clearButton="always" cancelButton="always" />
		<view class="out">
			<view class="select">
				<uni-data-select v-model="value" :localdata="range" @change="change"
					placeholder="综合排序"></uni-data-select>
			</view>
			<view class="shopListView">
				<navigator class="shopListItem" url="/pages/carRepair/cr_storeDetails/cr_storeDetails"
					hover-class="none">
					<image class="left-image" src="/static/shoplist.png" mode="aspectFill" />
					<view class="info">
						<view class="shopName">
							<text>伟业汽车维修厂</text>
							<text class="distance">44m</text>
						</view>
						<view class="shopRate">
							<uni-rate :readonly="true" size=19 :value="2" />
							<text> 3分</text>
							<text>销量：322</text>
						</view>
						<view class="shopTime">
							<text>营业时间：周一至周五</text>
							<text>09:00 - 22:00</text>
						</view>
						<view class="address">
							山阳区人民中路32号
						</view>
					</view>
				</navigator>
				<view class="uni-horizontal-line"></view>
				<navigator class="shopListItem" url="/pages/carRepair/cr_storeDetails/cr_storeDetails"
					hover-class="none">
					<image class="left-image" src="/static/shoplist.png" mode="aspectFill" />
					<view class="info">
						<view class="shopName">
							<text>伟业汽车维修厂</text>
							<text class="distance">44m</text>
						</view>
						<view class="shopRate">
							<uni-rate :readonly="true" size=19 :value="2" />
							<text> 3分</text>
							<text>销量：322</text>
						</view>
						<view class="shopTime">
							<text>营业时间：周一至周五</text>
							<text>09:00 - 22:00</text>
						</view>
						<view class="address">
							山阳区人民中路32号
						</view>
					</view>
				</navigator>
				<view class="uni-horizontal-line"></view>
				<navigator class="shopListItem" url="/pages/carRepair/cr_storeDetails/cr_storeDetails"
					hover-class="none">
					<image class="left-image" src="/static/shoplist.png" mode="aspectFill" />
					<view class="info">
						<view class="shopName">
							<text>伟业汽车维修厂</text>
							<text class="distance">44m</text>
						</view>
						<view class="shopRate">
							<uni-rate :readonly="true" size=19 :value="2" />
							<text> 3分</text>
							<text>销量：322</text>
						</view>
						<view class="shopTime">
							<text>营业时间：周一至周五</text>
							<text>09:00 - 22:00</text>
						</view>
						<view class="address">
							山阳区人民中路32号
						</view>
					</view>
				</navigator>
				<view class="uni-horizontal-line"></view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: '',
				range: [{
						value: 0,
						text: "距离最近"
					},
					{
						value: 1,
						text: "评分最高"
					},
					{
						value: 2,
						text: "销量最高"
					},
				],
				rateValue: 0
			}
		},
		methods: {
			// handleInput(value) {

			// },
			// onChange(e) {
			// 	console.log('rate发生改变:' + JSON.stringify(e))
			// },
			// change(e) {
			// 	console.log("e:", e);
			// },
		}
	}
</script>
<style lang="scss">
	.out {
		background-color: #FFFFFF;
		height: 100vh;
	}

	.shopListView {

		width: 375px;
		height: 100%;
	}

	.shopListItem {
		display: flex;
		/* 使用Flexbox布局 */
		align-items: flex-start;
		/* 垂直居中对齐 */
		background-color: #FFFFFF;
	}

	.uni-horizontal-line {
		border-bottom: 1px solid #e5e5e5;
	}

	.left-image {
		width: 91px;
		/* 根据需要设置图片宽度 */
		height: 82px;
		/* 根据需要设置图片高度 */
		margin-right: 10px;
		/* 与信息部分保持间隔 */
		padding: 20px 0 25px 11px;
	}

	.info {
		flex: 1;
		/* 让信息部分占用剩余空间 */
		padding: 10px;
		/* 信息部分的内边距 */
		position: relative;
	}

	.shopName {
		width: 123px;
		height: 23px;
		font-size: 31rpx;
		font-weight: bold;

	}

	.shopRate {
		display: flex;
		/* 启用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐 */
		justify-content: flex-start;

		/* 水平方向从起始位置开始排列 */
		uni-rate {
			margin-right: 10px;
			/* 给评分和文本之间添加间隔 */
		}

		text {
			margin-left: 10px;
			/* 给文本添加一些左边距，与评分图标保持间隔 */
		}
	}

	.shopTime {
		width: 228px;
		height: 28px;
		margin-top: 5px;
	}

	.distance {
		position: absolute;
		right: 50rpx;
		font-size: 26rpx;
		color: #2177ff;

	}
</style>
<style scoped>
	/deep/ .uni-select__input-box[data-v-6b64008e] {
		height: 35px;
		position: relative;
		display: flex;
		flex: 0;
		flex-direction: row;
		align-items: center;

	}

	/deep/.uni-select__input-text[data-v-6b64008e] {
		padding-left: 15rpx;
		padding-right: 70rpx;
		color: #000;
		font-size: 27rpx;
	}

	/deep/ .uni-select[data-v-6b64008e] {
		padding-left: 10rpx;
		background-color: #ffffff;
		border: 0;

	}
</style>